<script lang="ts" setup>
import { ref } from 'vue';
import ReCol from '@/components/MyCol';
import { formRules } from '@/views/system/menu/utils/columns';
import Segmented from '@/components/Segmented';
import { menuTypeOptions } from '@/enums';
import { FormProps } from '@/views/system/menu/utils/types';
import { $t } from '@/plugins/i18n';
import { Plus, Search } from '@element-plus/icons-vue';

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({}),
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

// 打开图标网站
const openIconWebsite = () => {
	window.open('https://icon-sets.iconify.design/', '_blank');
};

defineExpose({ menuFormRef: ruleFormRef });
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="82px">
		<el-row :gutter="30">
			<re-col>
				<el-form-item :label="$t('menuType')">
					<Segmented v-model="newFormInline.menuType" :options="menuTypeOptions" />
				</el-form-item>
			</re-col>

			<re-col>
				<el-form-item :label="$t('previousMenu')">
					<el-cascader
						v-model="newFormInline.parentId"
						:options="newFormInline.higherMenuOptions"
						:props="{ value: 'id', label: 'title', emitPath: false, checkStrictly: true }"
						class="w-full"
						clearable
						filterable
						placeholder="请选择上级菜单"
					>
						<template #default="{ node, data }">
							<span>{{ data.title }}</span>
							<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
						</template>
					</el-cascader>
				</el-form-item>
			</re-col>

			<re-col :sm="24" :value="12" :xs="24">
				<el-form-item :label="$t('menuName')" prop="title">
					<el-input v-model="newFormInline.title" clearable placeholder="请输入菜单名称" />
				</el-form-item>
			</re-col>
			<re-col :sm="24" :value="12" :xs="24">
				<el-form-item :label="$t('routerName')" prop="name">
					<el-input v-model="newFormInline.name" clearable placeholder="请输入路由名称" />
				</el-form-item>
			</re-col>

			<re-col :sm="24" :value="12" :xs="24">
				<el-form-item :label="$t('routerPath')" prop="path">
					<el-input v-model="newFormInline.path" clearable placeholder="请输入路由路径" />
				</el-form-item>
			</re-col>
			<re-col v-show="newFormInline.menuType === 0" :sm="24" :value="12" :xs="24">
				<el-form-item :label="$t('componentPath')">
					<el-input v-model="newFormInline.component" clearable placeholder="请输入组件路径" />
				</el-form-item>
			</re-col>

			<re-col :sm="24" :value="12" :xs="24">
				<el-form-item v-model="newFormInline.rank" :label="$t('sort')" prop="rank">
					<el-input-number v-model="newFormInline.rank" :max="9999" :min="1" class="!w-full" controls-position="right" />
				</el-form-item>
			</re-col>

      <re-col :sm="24" :value="12" :xs="24">
        <el-form-item label="菜单图标" prop="icon">
          <div class="flex items-center">
            <el-tooltip content="点击预览区域前往图标网站" placement="top">
              <div
                class="mr-2 flex-shrink-0 w-8 h-8 flex items-center justify-center border rounded cursor-pointer hover:bg-gray-100"
                @click="openIconWebsite"
              >
                <IconifyIconOnline v-if="newFormInline.icon" :icon="newFormInline.icon"/>
                <el-icon v-else><Plus /></el-icon>
              </div>
            </el-tooltip>
            <el-input
              v-model="newFormInline.icon"
              clearable
              placeholder="请输入菜单图标"
            >
              <template #append>
                <el-tooltip content="前往图标网站查找图标" placement="top">
                  <el-button @click="openIconWebsite">
                    <el-icon><Search /></el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </el-input>
          </div>
        </el-form-item>
      </re-col>

			<re-col v-show="newFormInline.menuType === 1" :sm="24" :value="12" :xs="24">
				<el-form-item label="链接地址" prop="frameSrc">
					<el-input v-model="newFormInline.frameSrc" clearable placeholder="请输入 iframe 链接地址" />
				</el-form-item>
			</re-col>

			<re-col :sm="24" :value="12" :xs="24">
				<el-form-item label="是否显示">
					<el-switch v-model="newFormInline.visible" :inactive-text="$t('visible')" active-text="开启" inline-prompt style="

--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>
